<template>
	<view class="cardStrategy">
		<n-loading></n-loading>
		<top-bar :bgColor="bgColor" :type="topTabType" transparentFixedFontColor="#FFF" title="酒卡攻略"></top-bar>
		<image class="cardStrategyBj" src="https://lovebirdopen.com/static/img/cBj/cardStrategyBj.png" mode=""></image>
		<!-- 酒卡说明 -->
		<view class="cardExplain">
			<view class="cardExplainTit">酒卡说明</view>
			<view class="explainCont">
				<view class="line"></view>
				酒卡是购酒之后，未提货的酒体的存在状态。酒卡可用于在线预约，线下提酒，且酒卡可以转赠一次。酒卡在X天未提酒后，将会进行冻结，随之会产生高粱穗，酒卡可随时解冻使用。
			</view>
			<view class="rulesBox">
				<view class="rules">
					<text>*</text>酒卡可支持线上退货，退款比例为支付金额的40%
				</view>
				<view class="rules">
					<text>*</text>酒卡可转为线上发货，转为线上发货后不可再转为酒卡
				</view>
			</view>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 如何获得酒卡 -->
		<view class="cardExplain">
			<view class="cardExplainTit">如何获得酒卡</view>
			<view class="howGetCont">
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/howGet1.png" mode=""></image>
					<view class="stepOne">
						<text>01</text>
						<view class="stepCont">进入商品详情点击立即抢购进入购买页面</view>
					</view>
				</view>
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/howGet2.png" mode=""></image>
					<view class="stepOne">
						<text>02</text>
						<view class="stepCont">选择自助取货下单付款，付款成功后立即生成酒卡</view>
					</view>
				</view>
			</view>
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
		</view>
		<!-- 如何取酒 -->
		<view class="cardExplain mb0">
			<view class="cardExplainTit">如何取酒</view>
			<view class="howGetCont">
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine1.png" mode=""></image>
					<view class="stepTwo pb30">
						<view class="tit"><text>方法一</text></view>
						<view class="stepCont">选择酒卡</view>
					</view>
				</view>
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine2.png" mode=""></image>
					<view class="stepTwo pb30">
						<view class="stepCont">点击酒卡，查看酒卡详情里附近可取酒商家，前往商家取酒</view>
					</view>
				</view>
			</view>
			<view class="howGetCont">
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine3.png" mode=""></image>
					<view class="stepTwo pb30">
						<view class="stepCont">点击“立即提货”展示提货二维码，商家扫码提货</view>
					</view>
				</view>
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine4.png" mode=""></image>
					<view class="stepTwo pb30">
						<view class="tit"><text>方法二</text></view>
						<view class="stepCont">微信扫商家提货码</view>
					</view>
				</view>
			</view>
			<view class="howGetCont">
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine5.png" mode=""></image>
					<view class="stepTwo">
						<view class="stepCont">选择取货商品</view>
					</view>
				</view>
				<view class="cont">
					<image class="contImg" src="https://lovebirdopen.com/static/img/cardStrategy/getWine6.png" mode=""></image>
					<view class="stepTwo">
						<view class="stepCont">取货成功</view>
					</view>
				</view>
			</view>
			
			<image class="bot" src="https://lovebirdopen.com/static/img/cBj/Intersect.png" mode=""></image>
			<view class="experience" @tap="experienceGo">立即体验</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topTabType:'transparentFixed',
				// fontColor:'#fff',
				bgColor:''
			}
		},
		onLoad: function (option) {
			
		},
		onPageScroll(e) {
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.bgColor = '#FD8E57';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.bgColor = '';
			}
		},
		methods: {
			experienceGo(){
				uni.reLaunch({
				    url: '../index?barCur=2'
				});
			}
		}
	}
</script>

<style lang="scss">
	.cardStrategy{
		width: 100%;
		min-height: 100%;
		padding: 812rpx 40rpx 114rpx;
		background: #FD8E57;
		
		.cardStrategyBj{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1058rpx;
		}
		
		.cardExplain{
			position: relative;
			padding: 84rpx 32rpx 90rpx;
			margin-bottom: 68rpx;
			background-color: #fff;
			border-radius: 16rpx;
			// overflow: hidden;
			
			.cardExplainTit{
				position: absolute;
				top: -36rpx;
				left: 50%;
				width: 256rpx;
				height: 72rpx;
				margin-left: -128rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #FFFFFF;
				text-align: center;
				background: linear-gradient(99.66deg, #FF6C56 26.36%, #FF5238 55.66%);
				border: 2rpx solid #FFFFFF;
				border-radius: 70rpx;
				box-shadow: 0px 4rpx 8rpx rgba(192, 25, 0, 0.2), inset 0px 2rpx 10rpx rgba(198, 0, 0, 0.25);
			}
			
			.explainCont{
				position: relative;
				padding-bottom: 38rpx;
				font-size: 28rpx;
				line-height: 44rpx;
				color: #333333;
				border-bottom: 2rpx solid #E8E8E8;
				
				.line{
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 128rpx;
					height: 6rpx;
					margin-left: -64rpx;
					background: #FF5238;
				}
			}
			
			.rulesBox{
				position: relative;
				z-index: 1;
				padding-top: 32rpx;
				
				.rules{
					font-size: 24rpx;
					line-height: 44rpx;
					color: #999999;
					
					text{
						color: #FF5238;
					}
				}
			}
			
			.howGetCont{
				position: relative;
				width: 100%;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				
				.cont{
					// flex: 1;
					width: 47.5%;
					
					.contImg{
						width: 100%;
						height: 582rpx;
					}
					
					.stepOne{
						display: flex;
						padding-top: 24rpx;
						
						text{
							display: inline-block;
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							text-align: center;
							color: #fff;
							background: #FF5238;
							border-radius: 4rpx;
						}
						
						.stepCont{
							flex: 1;
							width: 1px;
							font-size: 24rpx;
							line-height: 40rpx;
							color: #FF5238;
						}
					}
					
					.stepTwo{
						padding-top: 24rpx;
						
						.tit{
							margin-bottom: 8rpx;
							
							text{
								display: inline-block;
								height: 40rpx;
								padding: 0 10rpx;
								line-height: 40rpx;
								font-size: 24rpx;
								text-align: center;
								color: #fff;
								background: #FF5238;
								border-radius: 4rpx;
							}
						}
						
						.stepCont{
							font-size: 24rpx;
							line-height: 40rpx;
							color: #FF5238;
						}
					}
					.pb30{
						padding-bottom: 30rpx;
					}
				}
			}
			
			.bot{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 116rpx;
			}
			
			.experience{
				position: absolute;
				bottom: -36rpx;
				left: 50%;
				width: 256rpx;
				height: 72rpx;
				margin-left: -128rpx;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #FFFFFF;
				text-align: center;
				background: linear-gradient(93.88deg, #FC6A3C 7.19%, #FF5238 94.63%);
				border-radius: 70rpx;
				box-shadow: 0px 4rpx 0px rgba(176, 23, 0, 0.2), inset 0px 2rpx 10rpx rgba(198, 0, 0, 0.3);
			}
		}
		
		.mb0{
			margin-bottom: 0;
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	}
</style>
